<template>
    <view class="content bg-white" style="padding: 0;" >
		<!-- 后退 -->
		<!-- #ifdef H5  -->  
			<!-- <view class="btn-back" @click="back"> <text class="iconfont">&#xe656;</text> </view> -->
		<!-- #endif -->
		
		<!-- 轮播 -->
		<swiper class="swiper" indicator-dots circular=true duration="400" v-if="homeSlide.length">
			<swiper-item v-for="(item , index) in homeSlide" :key="index" >
				<image :src="item.img" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		
		<!-- 信息 -->
		<view class="food-info " v-if="foods">
			<text style="font-size: 15px;" >{{foods.name}}</text>
			<text style="font-size: 12px;color:#868686;">
				月售 {{foods.sell_count}} 
				<text v-if="data.show_stock" style="margin-left:10px;"> 库存 {{foods.stock}}</text> 
			</text>
			<view style="display: flex;justify-content: space-between;" >
				<text class="food-price">￥{{foods.price}}
					<text class="food-primeCost" v-if="foods.old_price != foods.price">￥{{foods.old_price}}</text>
					<text class="fracture" v-if="foods.old_price != foods.price" style="margin-left: 5px;">
						<text class="icon">{{foods.discount}}折</text>
					</text>
				</text>
				<cartcontrol :food="foods" @add="addCart" @dec="decreaseCart" style="margin-top:3px;"></cartcontrol>
			</view>
			<text class="reduce" v-if="showReduce(foods)">
				<text class="icon">减</text>{{showReduce(foods)}}
			</text>
		</view>
		
		<!-- 商品描述 -->
		<view class="separator" v-if='foods.remark'></view>
		<view class="sl-card bg-white" v-if='foods.remark' >
			<view class="sl-card-title">商品信息</view>
			<view class="sl-card-content" >
				<text>{{foods.remark || ''}}</text>
			</view>
		</view>
		
		<!-- 评价 -->
		<view class="separator" v-if='evaluate_list.length'></view>
		<view class="eva-section" v-if='evaluate_list.length'>
			<view class="e-header">
				<text class="tit">评价</text><text> ({{evaluate_list.length}})</text>
				<text class="tip" @click="openEvaluate">好评率 {{good_rate}}%</text>
				<text class="yticon icon-you iconfont" @click="openEvaluate">&#xe61d;</text>
			</view> 
			<view class="eva-box" v-for="(item, index) in evaluate_list" :key="index" v-if='index < 2'>
				<image class="portrait" :src="item.headimgurl" mode="aspectFill"></image>
				<view class="right">
					<view class="name">{{item.user_name}}  
						<text class="iconfont" v-for="index in 5" :key="index" style="margin-left:2px;"
							:style="{color:(index>item.score ? '#bbbbbb':'#fbc959')}" 	
						>&#xe60e;</text>
						<text class="time" style="float: right;">
							{{ item.create_time.substr(0,10) }}
						</text>
					</view>
					<text class="con">{{item.content}}</text>
					<!-- <view class="bot">
						<text class="attr"></text>
						<text class="time">{{item.create_time}}</text>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 评价弹窗 -->
		<uni-popup ref="popup" type="center" :height="'100%'"  style="width: 100%;">
			<view class="btn-back" @click="cancel"><text class="iconfont">&#xe656;</text></view>
			<scroll-view class="eva-section" style="height: 100%;width:calc(100vw - 35upx);" scroll-y="true">
				<view class="e-header">
					<text class="tit">评价</text><text> ({{evaluate_list.length}})</text>
					<text class="tip">好评率 {{good_rate}}%</text>
				</view> 
				<view class="eva-box" v-for="(item, index) in evaluate_list" :key="index" >
					<image class="portrait" :src="item.headimgurl" mode="aspectFill"></image>
					<view class="right">
						<view class="name">{{item.user_name}}
							<text class="iconfont" v-for="index in 5" :key="index" style="margin-left:2px;"
								:style="{color:(index>item.score ? '#bbbbbb':'#fbc959')}" 	
							>&#xe60e;</text>
							<text class="time" style="float: right;">
								{{ item.create_time.substr(0,10) }}
							</text>
						</view>
						<text class="con">{{item.content}}</text>
					</view>
				</view>
			</scroll-view>
		</uni-popup>
		
		
		<!-- 图文详情 -->
		<view  class="separator" ></view>
		<view class="detail-desc" v-if="goods_details">
			<view class="d-header">
				<text>图文详情</text>
			</view>
			<rich-text :nodes="goods_details" class="richText"></rich-text>
		</view>
		
		<!--流白 -->
		<view style="height: 55px;" ></view>
		
		<!-- 购物车 -->
		<shopcart class="shopcart" v-if="data.goods.length"
			:goods="data.goods" 
			:deliveryFee="data.delivery_fee"
			:satisfy="data.delivery_price"
			@add="addCart" 
			@dec="decreaseCart" 
			@delAll="delAll" 
			@settlement="settlement"
		></shopcart>
		
    </view>
</template>

<script>
	import Vue from 'vue'
    import { mapState } from 'vuex'
	import config from '@/config/config'
	import cartcontrol from '@/components/sl-ui/sl-tamp/cartcontrol.vue'
	import shopcart from '@/components/sl-ui/sl-tamp/shopcart.vue'
	import uniCard from '@/components/uni-ui/uni-card/uni-card.vue'
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
    export default {
		components: {cartcontrol,shopcart,uniCard,uniPopup},
        computed: mapState(['forcedLogin', 'hasLogin', 'userInfo']),
        data() {
			return {
				data:{
					delivery_fee:0,//配送费
					delivery_price:0, //起送价
					goods:[]
				},
				id:0,
				foods:{},
				goods_details:'', //图文详情
				evaluate_list:[], //评价列表
				good_rate:100,	//好评率
				old_page:'/pages/main/main',
				currentIndex:0,
				serverUrl: (config.debug ? config.debugUrl : config.serverUrl).replace('index.php/','/')
			}
        },
		computed:{
			homeSlide: function(){
				let arr = [{ img:"" }]; 
				let foods = this.foods;
				if(foods && foods.imgs){
					arr = String(foods.imgs).split(',').map(img=>{
						return {
							img: this.serverUrl + String(img).replace(/\\/g,"\/")
						}
					});
				}
				return arr;
			}
		},
		watch: { /*监听数据的变化*/
			data: { //监听对象
				handler: function (newVal) {
					this.foods = this.getFoods();
					uni.setStorageSync("goodsData",this.data);
				},
				deep: true
			}
		},
		onLoad(option){
			let goodsData = uni.getStorageSync("goodsData");
			if(option.id) this.id = option.id;
			if(option.old_page) this.old_page = option.old_page;
			if(goodsData) this.data = goodsData ;
			if(option.id) this.getGoodsDetails(this.id);
		},
		methods:{
			// 获取明细
			getGoodsDetails(goods_id){
				this.$request('/app/v1/Goods/getGoodsDetails',{goods_id:goods_id}).then(res=>{
					let goods_details = res.data.goods_details || '';
					goods_details = (goods_details).replace(/\<img/gi, '<img style="width:100% !important;"');
					goods_details = (goods_details).replace(/\<p/gi, '<p style="width:100% !important;"');
					this.goods_details = goods_details;
					this.good_rate = res.data.good_rate;
					this.evaluate_list = res.data.evaluate_list;
				}).catch(res=>{   
					
				});
			},
			// 从缓存获取当前商品
			getFoods(){
				let foods = null;
				if(this.data && this.id && this.data.goods){
					this.data.goods.forEach(h=>{
						if(h.foods && h.foods[0]){
							h.foods.map(l=>{
								if(this.id == l.id) foods = l;
							}); 	
						}
					});
				}
				return foods;
			},
			// 显示满减
			showReduce(food){
				if(food.satisfy && food.reduce){
					return '满'+food.satisfy+"减"+food.reduce;
				}else{
					return '';
				}
			},
			// 添加
			addCart: function(item) {
				if (item.count >= 0) { item.count++; }
				this.data.goods.forEach((good,goodIndex) => {
					good.foods.forEach((food,foodIndex) => {
						if (item.id && item.id == food.id){
							Vue.set(food, 'count', item.count >= 0 ? item.count : 1);
						}
					})
				});
			},
			// 删除
			decreaseCart(item) {
				if (item.count) {
					item.count--
					this.data.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.id && item.id == food.id)
								Vue.set(food, 'count', item.count);
						})
					})
				}
			},
			// 清空购物车
			delAll() {
				this.data.goods.forEach((good) => {
					good.foods.forEach((food) => {
						if (food.count) {
							Vue.set(food, 'count',0);
						}
					});
				});
			},
			//获取购物车所有数据
			getAllList(){
				let arr = [];
				this.data.goods.forEach((good) => {
					good.foods.forEach((food) => {
						if (food.count > 0) {
							arr.push(food);
						}
					});
				});
				return arr;
			},
			// 结算
			settlement(){
				let data = this.getAllList();
				let item = data.map(h=>{
					return {
						goods_id:h.id,
						count:h.count,
						price:h.price
					} 
				})
				uni.redirectTo({
					url: '/pages/order/createOrder?item='+encodeURIComponent(JSON.stringify(item)),
				});
			},
			back(){
				// #ifdef H5 
					uni.reLaunch({ url: this.old_page });
					return false;
				// #endif 
				uni.navigateBack();
			},
			openEvaluate(){
				this.$refs.popup.open();
			},
			cancel() {
				this.$refs.popup.close()
			}
		}
    }
</script>

<style lang="scss">
	.btn-back{
		position: fixed;
		z-index: 1;
		background: #000;
		border-radius: 50%;
		color: #fff;
		line-height: 1;
		width: 85upx;
		height: 85upx;
		text-align: center;
		line-height: 85upx;
		opacity: 0.6;
		bottom: 250upx;
		right: 25upx;
		.iconfont{
			font-size: 50upx;
		}
	}
    .swiper{
    	width: 100%;
    	height: 600upx;
		background: #eaeaea;
    }
    swiper-item image{
    	width: 100%;
    	height: 100%;
    }
	.shopcart{
		position: fixed;
		bottom: 0;
		z-index: 3;
	}
	.food-info {
		padding: 5px 16px 10px 10px;
		display: flex;
		flex-direction: column;
	}
	.food-price {
		color: #f01414;
		font-size: 16px;
	}
	.food-primeCost {
		font-size: 12px;
		text-decoration:line-through;
		margin-left: 7px;
		color: #9e9e9e;
		line-height: 28px;
	}
	.fracture,.reduce{
		font-size: 12px;
		color:#eaa753;
		line-height: 16px;
	}
	.fracture .icon,.reduce .icon{
		padding: 0 2px;
		background: #efbb7a;
		color: #ffffff;
		border-radius: 3px;
		font-size: 10px;
		line-height: 0;
		margin-right: 5px;
	}
	.reduce{
		color:#f56b36;
	}
	.reduce .icon{
		background: #f56b36;
	}
	
	// 商品描述
	.sl-card{
		margin: 10px 0px;
		margin-top: 0;
		.sl-card-title{
			padding: 10upx 20upx;
			border-bottom: 1px solid #eaeaea;
			font-size:28upx;
		}
		.sl-card-content{
			padding:10px;
			padding-left: 15px;
			font-size:24upx;
			line-height: 1.5;
			color: #1d1d1d;
			min-height: 60upx;
		}
	}
	
	
	// 分割线
	.separator{
		height: 10px;
		background:#f1f1f1;
	}
	
	
	/* 评价 */
	.eva-section{
		display: flex;
		flex-direction: column;
		padding: 20upx 20upx;
		background: #fff;
		padding-bottom: 0;
		.e-header{
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $uni-font-size-sm + 2upx;
			color: $font-color-light;
			//border-bottom: 1px solid $border-color-base;
			.tit{
				font-size: $uni-font-size-base + 2upx;
				color: $font-color-dark;
				margin-right: 4upx;
			}
			.tip{
				flex: 1;
				text-align: right;
			}
			.icon-you{
				margin-left: 10upx;
			}
		}
		.eva-box{
			display: flex;
			padding: 20upx 10upx;
			//border-bottom: 1px solid $border-color-base;
			.portrait{
				flex-shrink: 0;
				width: 80upx;
				height: 80upx;
				border-radius: 100px;
			}
			.right{
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: $uni-font-size-base;
				color: $font-color-base;
				padding-left: 26upx;
				.con{
					font-size: $uni-font-size-base;
					color: $font-color-dark;
					padding: 20upx 0;
				}
				.bot{
					display: flex;
					justify-content: space-between;
					font-size: $uni-font-size-sm;
					color:$font-color-light;
				}
			}
		}
	}
	
	
	/*  详情 */
	.detail-desc{
		background: #fff;
		margin-top: 16upx;
		padding: 0 20upx;
		.d-header{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $uni-font-size-base + 2upx;
			color: $font-color-dark;
			position: relative;
				
			text{
				padding: 0 20upx;
				background: #fff;
				position: relative;
				z-index: 1;
			}
			&:after{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc; 
			}
		}
		
	}
	
	
</style>